<template>
    <view class="mine" style="position: relative">
        <view class="index">
            <!-- 头像 -->
            <view class="avatar">
                <s-header :userInfo="userInfo" ref="headerRef" @handleAvatar="handleAvatar"></s-header>
                <!-- 钱包 -->
                <view>
                    <u-grid :border="true" col="4">
                        <u-grid-item @click="showAudit=true">
                            <view style="font-weight: 700;margin-bottom: 10rpx;">
                                <text style="font-size: 20rpx;">¥ </text>
                                {{userInfo.amount}}
                            </view>
                            <view style="color: #999;font-size: 24rpx;">我的分红</view>
                        </u-grid-item>
                        <u-grid-item @click="showPoints=true">
                            <view style="font-weight: 700;margin-bottom: 10rpx;">
                                {{userInfo.points||0}}
                            </view>
                            <view style="color: #999;font-size: 24rpx;">我的积分</view>
                        </u-grid-item>
                        <u-grid-item >
                            <view style="font-weight: 700;margin-bottom: 10rpx;">
                                {{userInfo.redeemNumer||0}}
                            </view>
                            <view style="color: #999;font-size: 24rpx;">刷新次数</view>
                        </u-grid-item>
                        <u-grid-item @click="showQrCode = true">
                            <view style="font-weight: 700;margin-bottom: 10rpx;">
                                <u-image width="40rpx" height="40rpx" src="/static/img/qrcode.png"></u-image>
                            </view>
                            <view style="color: #999;font-size: 24rpx;">邀请码</view>
                        </u-grid-item>
                    </u-grid>
                </view>

                <view class="p_10 m_t_20 vip_box dis_f_sb_c c_f"  @click="handleToVip">
                    <view class="dis_f_l_c ">
                        <view class="f_w_b f_s_20">VIP</view>
                        <view class=" m_l_10">
                            <view class="f_s_16 dis_f_l_c">
                                会员卡
                                <view class="f_s_12 m_l_10" v-if="userInfo.ifhy" > 剩余{{userInfo.hyNumber}}次</view>
                            </view>
                            <view class="f_s_12 m_t_5" v-if="!userInfo.ifhy">充值会员享受发布7条信息，</view>
                            <view class="f_s_12 m_t_5" v-if="!userInfo.ifhy">每天免费刷新7次信息。</view>
                            <view class="f_s_12 m_t_5" v-else > 有效期至 {{userInfo.gqTime}}</view>
                        </view>
                    </view>
                    <view>
                        <u-button v-if="!userInfo.ifhy" type="primary" color="#27AC2F" size="small" shape="circle">立即开通</u-button>
                    </view>
                </view>
            </view>
            <view class="card_box p_10 m_t_20">
                <u-grid :border="false" col="4">
                    <u-grid-item   @click="handleToSend">
                        <image src="@/static/img/fb.png" style="width: 100rpx;height: 100rpx;"></image>
                        <text class="grid-text">我的发布</text>
                    </u-grid-item>
                    <u-grid-item   @click="handleToInvestment">
                        <image src="@/static/img/ad.png" style="width: 100rpx;height: 100rpx;"></image>
                        <text class="grid-text">我的广告</text>
                    </u-grid-item>
                    <u-grid-item  @click="handleCashRecord(0)">
                        <image src="@/static/img/wdyj.png" style="width: 100rpx;height: 100rpx;"></image>
                        <text class="grid-text">我的分红</text>
                    </u-grid-item>
                    <u-grid-item   @click="handleCashRecord(1)">
                        <image src="@/static/img/fxjl.png" style="width: 100rpx;height: 100rpx;"></image>
                        <text class="grid-text">提现记录</text>
                    </u-grid-item>
                </u-grid>
            </view>
            <view class="card_box p_10 m_t_20">
                <u-cell-group :border="false">
                    <u-cell icon="account" isLink title="实名认证" @click="handleToRealName"></u-cell>
                    <u-cell icon="file-text" isLink title="投诉建议" @click="handleToIssue"></u-cell>
                    <u-cell icon="man-add" isLink title="成为代理" @click="handleToAgent"></u-cell>
                    <u-cell icon="plus-people-fill" v-if="userInfo.isProxy==1" isLink title="我的团队" @click="handleToMyTeam"></u-cell>
                    <u-cell icon="list-dot" v-if="userInfo.isProxy==1" isLink title="实名审核" @click="handleToRealNameList">
                        <u-badge  slot="value" :value="userInfo.realNumber"></u-badge>
                    </u-cell>
                    <u-cell icon="hourglass-half-fill" v-if="userInfo.isProxy==1" isLink title="广告审核" @click="handleToAdExamine">
                        <u-badge  slot="value" :value="userInfo.advertisementsNumber"></u-badge>
                    </u-cell>
                    <u-cell icon="list" v-if="userInfo.isProxy==1" isLink title="信息审核" @click="handleToMessageList">
                        <u-badge  slot="value" :value="userInfo.releaseNumber"></u-badge>
                    </u-cell>
                    <u-cell icon="phone" isLink title="联系客服" @click="showTel=true"></u-cell>
                    <u-cell icon="bag" isLink title="关于我们" @click="handleToProtocol(4)"></u-cell>
                </u-cell-group>
            </view>
        </view>
        <!--    邀请码    -->
        <u-popup :show="showQrCode" @close="showQrCode=false" mode="center" :round="10" :safeAreaInsetBottom="false">
            <view style="padding: 30rpx;">
                <view class="dis_f_c_c f_s_16 m_b_10 c_9">邀请得积分</view>
                <u-image width="300rpx" height="300rpx" :src="myInfoVo.qrCodeUrl"></u-image>
                <view class="dis_f_c_c f_s_16 m_t_10 c_9">长按保存二维码</view>
            </view>
        </u-popup>
        <!-- 提现弹窗 -->
        <u-modal :show="showAudit" title="提现" :showCancelButton="true" @confirm="handleConfirm" @cancel="showAudit = false">
            <u--form labelPosition="left" :model="cash" ref="uForm" :rules="rules">
                <u-form-item label="卡号" prop="alipay" ref="item1">
                    <u--input v-model="cash.alipay" placeholder="请输入农业银行卡号"></u--input>
                </u-form-item>
                <u-form-item label="金额" prop="balance" ref="item2">
                    <u--input v-model="cash.balance" placeholder="请输入提现金额"></u--input>
                </u-form-item>
            </u--form>
        </u-modal>
        <!-- 积分兑换 -->
        <u-modal :show="showPoints" title="积分兑换" :showCancelButton="true" @confirm="handlePointsConfirm" @cancel="showPoints = false">
            <u--input v-model="pointsNumber" type="number" placeholder="请输入兑换次数"></u--input>
            <view class="c_9 dis_f_c_c m_t_5">{{redeem}}</view>
        </u-modal>
        <!--    客服电话    -->
        <u-modal :show="showTel" title="客服电话"  confirmText="取消" @confirm="showTel = false" @cancel="showTel = false">
            <view  v-for="(item,index) in phone" :key="index" @click="handleToTel(item.configValue)">
                <view class="dis_f_c_c m_b_10">
                    {{item.configValue}}
                </view>
            </view>
        </u-modal>
        <!-- 用户昵称和图像 -->
        <s-wx-auth ref="authRef" @getMyInfo="getMyInfo"></s-wx-auth>
        <!-- 授权弹窗 -->
        <s-auth-modal />
    </view>
</template>

<script>
import {getMyInfoApi, getByKeyApi, auditApi, redeemApi} from "@/sheep/api/index";
import { mapGetters, mapMutations } from "vuex";
export default {
    data() {
        return {
            redeem:'',
            pointsNumber:'',
            showPoints:false,
            phone:[],
            showTel:false,
            timer: null,
            showQrCode: false,
            showAudit: false,
            paramsPage: {
                pageNum: 1,
                pageSize: 10,
            },
            myInfoVo: {},
            cash: {
                alipay: "",
                balance: "",
            },
            rules: {
                alipay: {
                    type: "string",
                    required: true,
                    message: "请输入农业银行卡号",
                    trigger: ["blur", "change"],
                },
                balance: {
                    type: "number",
                    required: true,
                    message: "请输入提现金额",
                    trigger: ["blur", "change"],
                },
            },
            pattern: {
                icon: 'headphones',
                color: '#7A7E83',
                backgroundColor: '#fff',
                selectedColor: '#27AC2F',
                buttonColor: '#27AC2F',
                iconColor: '#fff'
            },
        };
    },
    onLoad() {
    },
    onShow() {
        this.getMyInfo();
        this.getPhone()
        this.getredeem()
        this.$refs.headerRef.getVipList()
    },
    onHide() {
        // 清除定时器
        clearInterval(this.timer);
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    methods: {
        ...mapMutations({
            setUserInfo: "user/setUserInfo",
        }),
        async getPhone() {
            let res = await getByKeyApi("phone");
            this.phone = res.data;
        },
        //兑换规则
        async getredeem() {
            let res = await getByKeyApi("redeem");
            this.redeem = res.data[0]?.remark;
        },
        handleToSend(){
            uni.navigateTo({
                url: "/pages/mine/mySend",
            });
        },
        handleToLike(){
            uni.navigateTo({
                url: "/pages/mine/myLike",
            });
        },
        handleToRealName(){
            uni.navigateTo({
                url: "/pages/mine/realName",
            });
        },
        handleToAboutUs(type){
            uni.navigateTo({
                url: "/pages/mine/aboutUs?type="+type,
            });
        },
        handleToVip(){
            uni.navigateTo({
                url: "/pages/mine/vipList",
            });
        },
        handleToIssue(){
            uni.navigateTo({
                url: "/pages/mine/addIssue",
            });
        },
        handleToAgent(){
            uni.navigateTo({
                url: "/pages/mine/agent",
            });
        },
        handleToInvestment(){
            uni.navigateTo({
                url: "/pages/mine/investment",
            });
        },
        handleToRealNameList(){
            uni.navigateTo({
                url: "/pages/mine/realNameList",
            });
        },
        handleToMyTeam(){
            uni.navigateTo({
                url: "/pages/mine/myTeam",
            });
        },
        handleToAdExamine(){
            uni.navigateTo({
                url: "/pages/mine/adExamine",
            });
        },
        handleToProtocol(e){
            uni.navigateTo({
                url: '/pages/agreement/index?type='+e
            })
        },
        handleToMessageList(){
            uni.navigateTo({
                url: "/pages/mine/messageList",
            });
        },
        handleToCommission(){
            uni.navigateTo({
                url: "/pages/mine/commissionList",
            });
        },
        handleToDistribution(){
            uni.navigateTo({
                url: "/pages/mine/distributionList",
            });
        },
        handleExit(){},
        handleAvatar() {
            this.$refs.authRef.open(this.myInfoVo.nickName, this.myInfoVo.wxAvatar);
        },
        handleCashRecord(type) {
            uni.navigateTo({
                url: "/pages/cashRecord/index?type="+type,
            });
        },
        handleToTel(phone){
            uni.makePhoneCall({
                phoneNumber: phone
            });
        },
        // 提现
        handleConfirm() {
            this.$refs.uForm
                .validate()
                .then((res) => {
                    auditApi(this.cash).then((res) => {
                        if (res.code === 200) {
                            this.showAudit = false;
                            this.getMyInfo();
                        }
                    });
                })
                .catch((errors) => {
                    console.log(errors);
                });
        },
        /** 积分兑换 */
        handlePointsConfirm(){
            if (!this.pointsNumber){
                uni.showToast({
                    title:'请输入兑换次数',
                    icon:'none'
                })
                return
            }
            redeemApi({pointsNumber:this.pointsNumber}).then(res=>{
                uni.showToast({
                    title:res.msg,
                    icon:'none'
                })
                if (res.code==200){
                    this.pointsNumber = ''
                    this.showPoints=false
                    this.getMyInfo()
                }
            })
        },
        getMyInfo() {
            getMyInfoApi().then((res) => {
                this.myInfoVo = res.data;
                this.setUserInfo(this.myInfoVo);
            });
        },
        copy(value) {
            uni.setClipboardData({
                data: value,
                success: function () {
                    uni.showToast({
                        title: "复制成功",
                        icon: "none",
                    });
                },
            });
        },
        handleOrder(index) {
            uni.navigateTo({
                url: "/pages/order/index?type="+index,
            });
        },
        handlerMyGoods(index) {
            if (index == 3) {
                uni.navigateTo({
                    url: "/pages/mygoods/index?type=6",
                });
            } else if (index == 2) {
                uni.navigateTo({
                    url: "/pages/mygoods/index?type=4",
                });
            } else if (index == 1) {
                uni.navigateTo({
                    url: "/pages/mygoods/index?type=0",
                });
            } else if (index == 0){
                uni.navigateTo({
                    url: "/pages/mine/goodRelease",
                });
            }
        },
    },
};
</script>

<style lang="scss" scoped>
/deep/ .u-modal__content{
    display: unset!important;
}
.kf{
    position: absolute;
    bottom: 100rpx;
    right: 40rpx;
    z-index:999;
    /deep/.u-button--square{
        border-radius: 50rpx;
    }
}
.mine {
    background: linear-gradient(to bottom, #54B62D 10%, #80C22B 20%, #80C22B 30%, #f5f5f5 45%);
    min-height: 100vh;
    position: relative;
    .custom {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        font-size: 40rpx;
        font-weight: bolder;
        display: flex;
        align-items: center;
        z-index: 1;
    }
    .main {
        padding: 0 10rpx;
        .header {
            display: flex;
            padding: 42rpx 0;
            color: #fff;
            justify-content: space-between;
            &::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background: url("https://gsdq-1329143881.cos.ap-beijing.myqcloud.com/minebg.png")
                no-repeat;
                background-size: 100% auto;
            }
        }
    }
    .index {
        padding: 30rpx;
        position: relative;
        z-index: 99;
        .info {
            font-size: 24rpx;
            color: #999999;
            display: flex;
            align-items: center;
        }
        .avatar {
            padding: 30rpx;
            padding-bottom: 0;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20rpx;
            .avatar-box {
                position: relative;
                height: 50%;
                display: flex;
                margin-bottom: 20rpx;
                .vip_img{
                    position: absolute;
                    left: -11px;
                    top: -10px;
                    z-index: 1;
                }
                .vip_active{
                    border: 4rpx solid #E1BC6D;
                }
                .userId {
                    margin-left: 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    .phonenumber {
                        display: flex;
                        align-items: center;
                        font-weight: 700;
                    }
                }
            }
            .vip_box{
                background-color: #68BC2C;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
            }
        }
        .order {
            margin-top: 30rpx;
            padding: 30rpx;
            background-color: #fff;
            border-radius: 20rpx;
            .kefu {
                margin: 20rpx 0 30rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .kefu-left {
                    display: flex;
                    align-items: center;
                    font-size: 30rpx;
                }
            }
        }
        .title {
            font-size: 30rpx;
            font-weight: 700;
            margin-bottom: 20rpx;
        }
        .grid-text {
            margin: 16rpx 0;
            font-size: 24rpx;
        }
    }
    .qrcode {
        padding: 30rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .phone {
            display: flex;
            align-items: center;
        }
        .desc {
            font-size: 24rpx;
            color: #999999;
            margin-top: 10rpx;
        }
    }
}
</style>
